<template>
  <view class="content">
    <view class="logo">
      <u-avatar :src="src" size="200"></u-avatar>
    </view>
    <view>
      <text class="title">欢迎使用优品查</text>
    </view>
   
    <!-- #ifdef MP-WEIXIN -->
    <u-button
      type="primary"
      :custom-style="customStyle"
      open-type="getPhoneNumber"
      @getphonenumber="decryptPhoneNumber"
      scope="phoneNumber"
      >授权手机号一键登录</u-button
    >
    <!-- #endif -->


    <!-- #ifdef MP-ALIPAY -->
    <!-- <button
      class="login-button"
      open-type="getAuthorize"
      @getAuthorize="onGetAuthorize"
      @error="onAuthError"
      scope="userInfo"
    >
      一键登录
    </button> -->
    <button
      class="login-button"
      @click="onGetAuthorize"
    >
      一键登录
    </button>
      <!-- scope="phoneNumber" -->

    <!-- #endif -->

    <view class="agreement">
      <u-checkbox v-model="checked" :disabled="false" shape="circle" active-color="#3745eb">
        <text>我已阅读并且同意</text>
      </u-checkbox>
      <view class="agreement-list">
        <text @click="openPopup(item)" v-for="item in displayAgreements" :key="item">{{ AgreementTitle[item]}}</text>
      </view>
    </view>

    <u-popup
      v-model="isPopupShow"
      mode="bottom"
      border-radius="14"
      :closeable="true"
    >
      <view class="popup-content">
        <view class="popup-title">{{ popupTitle }}</view>
        <scroll-view scroll-y="true" style="height: 600rpx;margin:10rpx 30rpx 0 30rpx">
          <text style="font-size:24rpx;">{{currentAgreement}}</text>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import Agreement from "@/utils/agreements"
import { mapActions, mapState } from "vuex";
const AgreementTitle= {user_use:'《用户使用协议》',privacy_agreement: '《隐私协议》',data_analysis:'《数据分析》' }
export default {
  data() {
    return {
      src: "",
      // 是否同意协议
      checked: false,
      isPopupShow: false,
      popupTitle: "",
      currentAgreement:'',
      AgreementTitle: AgreementTitle,
      customStyle: {
        marginTop: "200rpx",
        width: "600rpx",
        borderRadius: "30rpx",
        backgroundColor: "#3745eb",
      },
    };
  },
  computed: {
    ...mapState("Public", ["miniApp",'appId','displayAgreements']),
  },
  onLoad() {},
  methods: {
     ...mapActions("user", ["login"]),
    openPopup(text) {
      this.isPopupShow = true;
      this.popupTitle = this.AgreementTitle[text];
      this.currentAgreement = Agreement[text]
    },
    // 微信获取手机号，暂时没用
    // #ifdef MP-WEIXIN
    decryptPhoneNumber(e) {
      const self = this;
      console.log(e);
      uni.login({
        provider: self.miniApp,
        success: function(loginRes) {
          console.log(loginRes);
        },
      });
    },
    // #endif
    // #ifdef MP-ALIPAY
    onGetAuthorize(e) {
      if (!this.checked) {
        uni.showToast({
          title: "请阅读并且同意《用户使用协议》《隐私协议》",
        });
        return;
      }
      this.login()
    },
    onAuthError(e) {
      console.log(e);
    },
    // #endif
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  margin: 200rpx auto 50rpx auto;
}

.title {
  font-size: 36rpx;
  color: $uni-text-color;
}


.agreement {
  margin-top: 50rpx;
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
  align-items: center;

  & text {
    font-size: 22rpx;
    color: $uni-text-color-grey;
  }

  & .agreement-list>text {
    font-size:18rpx;
    color: #2d42fd;
  }
}

.login-button {
  margin-top: 200rpx;
  width: 600rpx;
  border-radius: 30rpx;
  background-color: #3745eb;
  color: white;
}

// .popup-content {
//   padding: 10px;
//   position: relative;
//   .popup-title {
//     position: absolute;
//     left: 50%;
//     transform: translateX(-50%);
//     font-size: $uni-font-size-lg;
//     color: $uni-color-title;
//   }
// }
.popup-title{
  text-align: center;
  height: 60rpx;
  line-height: 60rpx;
}
</style>
